import Taro from '@tarojs/taro-rn';
import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { View, Input, Button, Text, Image } from "@tarojs/components-rn";
import { inject, observer } from "@tarojs/mobx-rn";
import { getRuntime, isPhone } from "../../utils/common";
import set_password_phoneStyleSheet from "./set_password_phone_styles";
import eye from "../../assets/img/icon_01.png";
import eye_on from "../../assets/img/icon_01_on.png";
var _styleSheet = set_password_phoneStyleSheet;

function _getClassName() {
  var className = [];
  var args = arguments[0];
  var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();

  if (type === 'string') {
    args = args.trim();
    args && className.push(args);
  } else if (type === 'array') {
    args.forEach(function (cls) {
      cls = _getClassName(cls).trim();
      cls && className.push(cls);
    });
  } else if (type === 'object') {
    for (var k in args) {
      k = k.trim();

      if (k && args.hasOwnProperty(k) && args[k]) {
        className.push(k);
      }
    }
  }

  return className.join(' ').trim();
}

function _getStyle(classNameExpression) {
  var className = _getClassName(classNameExpression);

  var classNameArr = className.split(/\s+/);
  var style = [];

  if (classNameArr.length === 1) {
    style.push(_styleSheet[classNameArr[0].trim()]);
  } else {
    classNameArr.forEach(function (cls) {
      style.push(_styleSheet[cls.trim()]);
    });
  }

  return style;
}

let ForgetPassword = class ForgetPassword extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentEye: false,
      currentCenterEye: false,
      eyeImg: eye,
      eyeCenterImg: eye,
      focus: 'userPhoneNumber',
      // userPhoneNumber: '13629439834',
      userPhoneNumber: null,
      userCode: '',
      //password: '123456',
      password: null,
      passwordCenter: null,
      isComplete: true,
      passwordType: 'password',
      passwordTypeCenter: 'password',
      getCodeText: '获取验证码',
      btnCodeStatus: false
    };
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '密码修改' });
  }
  handelRouter(url = '/pages/index/index') {
    getRuntime().navigateTo(url);
  }
  // input聚焦
  inputFocus(type = 'password') {
    this.setState({
      focus: type
    });
  }
  toggleEye() {
    this.setState({
      currentEye: !this.state.currentEye
    }, () => {
      let eyeImg = this.state.currentEye ? eye_on : eye;
      let passwordType = this.state.currentEye ? 'text' : 'password';
      this.setState({
        eyeImg,
        passwordType
      });
    });
  }
  toggleCenterEye() {
    this.setState({
      currentCenterEye: !this.state.currentCenterEye
    }, () => {
      let eyeCenterImg = this.state.currentCenterEye ? eye_on : eye;
      let passwordCenterType = this.state.currentCenterEye ? 'text' : 'password';
      this.setState({
        eyeCenterImg,
        passwordCenterType
      });
    });
  }
  inputChange(type, e) {
    this.setState({
      [type]: e.target.value
    }, () => {
      let { password, passwordCenter, userCode, userPhoneNumber } = this.state;
      if (userPhoneNumber && userCode && password && passwordCenter) {
        this.setState({
          isComplete: false
        });
      } else {
        this.setState({
          isComplete: true
        });
      }
    });
  }
  getCode() {
    let { userPhoneNumber, btnCodeStatus } = this.state;
    if (typeof btnCodeStatus === 'number') return;
    console.log(userPhoneNumber);
    if (!userPhoneNumber) {
      getRuntime().showToast('请填写手机号~');
      return false;
    }
    if (!isPhone) {
      getRuntime().showToast('请填写11位手机号码~');
      return false;
    }
    this.countDown();
    let { userStore } = this.props.stores;
    userStore.getSmsCode({
      form: {
        phoneNumber: userPhoneNumber
      }, callback: () => {
        getRuntime().showToast('验证码发送成功,请注意查收~');
      }
    });
  }
  // 验证码倒计时
  countDown() {
    let getCodeText = 10;
    let timer = setInterval(() => {
      getCodeText--;
      if (getCodeText === 0) {
        clearInterval(timer);
        this.setState({
          getCodeText: '获取验证码',
          btnCodeStatus: false
        });
      } else {
        this.setState({
          getCodeText: getCodeText + 's',
          btnCodeStatus: true
        });
      }
    }, 1000);
  }
  formSubmit() {
    let { userPhoneNumber, userCode, password, passwordCenter } = this.state;
    if (!userPhoneNumber) {
      getRuntime().showToast('请填写手机号~');
      return false;
    }
    if (!userCode) {
      getRuntime().showToast('请填写验证码s~');
      return false;
    }
    if (!password) {
      getRuntime().showToast('请填写密码~');
      return false;
    }
    if (password !== passwordCenter) {
      getRuntime().showToast('两次输入密码不一致~');
      return false;
    }
    let { userStore } = this.props.stores;
    userStore.setPassword({
      form: {
        password: password,
        smsCode: userCode,
        phoneNumber: userPhoneNumber
      },
      callback: () => {
        getRuntime().showModal('修改成功', '是否前往登录?', () => {
          getRuntime().navigateTo('/pages/login/login');
        });
      }
    });
  }
  render() {
    let { focus, eyeImg, eyeCenterImg, passwordType, passwordCenterType, isComplete, getCodeText, btnCodeStatus } = this.state;
    return <View style={_styleSheet["login-wrap"]}>
        <View>
          <View style={_getStyle(focus === 'userPhoneNumber' ? 'input-group input-group-on' : 'input-group')}>
            <Text style={_styleSheet["input-title"]}>手机号</Text>
            <Input autoFocus type="number" placeholderClass="placeholder-class" placeholder="请输入11位手机号" maxLenght="11" name="userPhoneNumber" onFocus={this.inputFocus.bind(this, 'userPhoneNumber')} onChange={this.inputChange.bind(this, 'userPhoneNumber')} style={_styleSheet["input"]} />
          </View>

          <View style={_getStyle(focus === 'userCode' ? 'input-group input-group-on' : 'input-group')}>
            <Text style={_styleSheet["input-title"]}>验证码</Text>
            <Input placeholderClass="placeholder-class" placeholder="请输入验证码" name="userCode" onFocus={this.inputFocus.bind(this, 'userCode')} onChange={this.inputChange.bind(this, 'userCode')} style={_styleSheet["input"]} />
            <Button onClick={this.getCode.bind(this)} type={"default"} disabled={btnCodeStatus} style={_styleSheet["get-code"]}>{getCodeText}</Button>
          </View>

          <View style={_getStyle(focus === 'password' ? 'input-group input-group-on' : 'input-group')}>
            <Text style={_styleSheet["input-title"]}>密码</Text>
            <Input placeholderClass="placeholder-class" placeholder="请输入登录密码" type={passwordType} name="password" onFocus={this.inputFocus.bind(this, 'password')} onChange={this.inputChange.bind(this, 'password')} style={_styleSheet["input"]} />
            <Image src={eyeImg} onClick={this.toggleEye.bind(this)} style={_styleSheet["eye"]} />
          </View>

          <View style={_getStyle(focus === 'passwordCenter' ? 'input-group input-group-on' : 'input-group')}>
            <Text style={_styleSheet["input-title"]}>确认密码</Text>
            <Input placeholderClass="placeholder-class" placeholder="请输入登录密码" type={passwordCenterType} name="passwordCenter" onFocus={this.inputFocus.bind(this, 'passwordCenter')} onChange={this.inputChange.bind(this, 'passwordCenter')} style={_styleSheet["input"]} />
            <Image src={eyeCenterImg} onClick={this.toggleCenterEye.bind(this)} style={_styleSheet["eye"]} />
          </View>

          <Button type="primary" onClick={this.formSubmit.bind(this)} disabled={isComplete} style={_getStyle(isComplete ? 'btn-submit' : 'btn-submit  btn-submit-on')}>确定修改</Button>

          
        </View>
      </View>;
  }
};
ForgetPassword = tslib_1.__decorate([inject("stores"), observer], ForgetPassword);
export default ForgetPassword;